<template>
  <div :class="{'collapse':isCollapse && !showTopMenus}" class="sidebar-logo-container">
    <transition name="sidebarLogoFade">
      <div class="sidebar-logo-link">
        <img v-if="logo" :src="logo" class="sidebar-logo">
        <h1 class="sidebar-title">
          <slot>
            <template>
              {{ title }}
            </template>
          </slot>
        </h1>
      </div>
    </transition>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'SidebarLogo',
    ...mapGetters([
        'sidebar'
    ]),
    props: {
        title: { type: String, default: '易臣智慧云' },
        logo: { type: String, default: '/images/logo.png' }
    },
    data() {
        return {

        }
    },
    computed: {
        showTopMenus() {
            return this.$store.state.settings.showTopMenus
        },
        isCollapse() {
            return !this.$store.state.app.sidebar.opened
        }
    }
}
</script>

<style lang="scss" scoped>
  @import "~@/wapp/common/styles/variables.scss";

.sidebarLogoFade-enter-active {
  transition: opacity 1.5s;
}

.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
  opacity: 0;
}

.sidebar-logo-container {
  transition: width 0.28s;
  transition-duration: 0.28s;
  position: relative;
  width: $sideBarWidth;
  height: $headerHeight;
  line-height: $headerHeight;
  text-align: left;
  overflow: hidden;
  /* background-color: $headerBackground; */
  float: left;

  & .sidebar-logo-link {
    height: 100%;
    width: 100%;

    & .sidebar-logo {
      width: 32px;
      height: 32px;
      vertical-align: middle;
      margin-right: 10px;
      margin-left: 20px;
    }

    & .sidebar-title {
      display: inline-block;
      margin: 0;
      color: $headerText;
      font-weight: 400;
      line-height: 50px;
      font-size: 24px;
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
      vertical-align: middle;
    }
  }

  &.collapse {
      width: 54px;

    .sidebar-logo {
        margin-left: 10px;
        margin-right: 0px;
    }
    .sidebar-title{
        display: none;
    }
  }
}
#skinWhite .sidebar-logo-container .sidebar-logo-link .sidebar-title{
  color: $theme-text-white;
}
</style>
